<!-- eslint-disable vue/no-mutating-props -->

<template>
  <el-form-item
    :label="item.label"
    :prop="item.key"
    v-bind="item.formItemStyle"
    :rules="item.rules"
  >
    <!-- 单选框 -->
    <template v-if="item.type === 'radio'">
      <el-radio-group
        v-model="item.options.defaultValue"
        @change="
          (value) => {
            item.options.onChange && item.options.onChange(value);
            $emit('change');
          }
        "
        v-bind="item.options.radioGroup"
      >
        <template v-if="!item.options.radio.button">
          <!-- 普通单选 -->
          <el-radio
            v-bind="item.options.radio"
            v-for="radio in item.options.options"
            :disabled="radio.disabled"
            :key="radio.value"
            :label="radio.value"
            >{{ radio.label }}</el-radio
          >
        </template>

        <template v-else>
          <!-- 单选按钮 -->
          <el-radio-button
            v-bind="item.options.radio"
            v-for="radio in item.options.options"
            :disabled="radio.disabled"
            :key="radio.value"
            :label="radio.value"
            >{{ radio.label }}</el-radio-button
          >
        </template>
      </el-radio-group>
    </template>
    <!-- 多选框 -->

    <template v-if="item.type === 'checkbox'">
      <el-checkbox-group
        v-model="item.options.defaultValue"
        v-bind="item.options.checkboxGroup"
        @change="
          (value) => {
            item.options.onChange && item.options.onChange(value);
            $emit('change');
          }
        "
      >
        <template v-if="!item.options.checkbox.button">
          <!-- 普通多选 -->
          <el-checkbox
            v-for="checkbox in item.options.options"
            v-bind="item.options.checkbox"
            :disabled="checkbox.disabled"
            :key="checkbox[item.options.optionsValue]"
            :label="checkbox[item.options.optionsValue]"
            >{{ checkbox[item.options.optionsLabel] }}</el-checkbox
          >
        </template>

        <template v-else>
          <!-- 多选框按钮 -->
          <el-checkbox-button
            v-for="checkbox in item.options.options"
            v-bind="item.options.checkbox"
            :disabled="checkbox.disabled"
            :key="checkbox.value"
            :label="checkbox.value"
            >{{ checkbox.label }}</el-checkbox-button
          >
        </template>
      </el-checkbox-group>
    </template>
    <!-- 输入框 -->

    <template v-if="item.type === 'Input'">
      <el-input
        @focus="handleFocus(item.key)"
        @blur="handleBlur"
        :style="{ width: item.options.width ? item.options.width : '' }"
        v-model="item.options.defaultValue"
        v-bind="item.options"
        @input="
          (value) => {
            item.options.onInput && item.options.onInput(value);
            $emit('onInput');
          }
        "
        @change="
          (value) => {
            item.options.onChange && item.options.onChange(value);
            $emit('onChange');
          }
        "
      >
        <template v-if="item.options.html">
          <el-button
            @click="
              (value) => {
                item.options.htmlClick && item.options.htmlClick(value);
                $emit('htmlClick');
              }
            "
            :slot="item.options.html.key"
            :style="{
              'background-color': item.options.html.backColor,
              color: item.options.html.textColor,
              height: '36px',
              'border-bottom-left-radius': '0px',
              'border-top-left-radius': '0px',
            }"
            :icon="item.options.html.value"
            >{{ item.options.html.text }}</el-button
          >
        </template>
      </el-input>
      <el-button
        v-if="activeInputId"
        @click.stop="recording(item.key)"
        icon="el-icon-microphone"
      ></el-button>
      <cd-popup
        v-if="keys"
        class="cdPopup"
        :ref="`cdPopup`"
        @keyFun="keyFun"
        @recognition="recognition"
      >
      </cd-popup>
      <!-- <div v-if="activeInputId"><el-button @click.stop="stopAudio">转文字</el-button><el-button @click.stop="stopAudioFun">停止</el-button></div> -->
    </template>
    <!-- 计数器 -->

    <template v-if="item.type === 'Number'">
      <el-input-number
        :style="{ width: item.options.width ? item.options.width : '' }"
        v-model="item.options.defaultValue"
        v-bind="item.options"
        @change="
          (value) => {
            item.options.onChange && item.options.onChange(value);
            $emit('onChange');
          }
        "
      ></el-input-number>
    </template>
    <!-- Select 选择器 -->

    <template v-if="item.type === 'select'">
      <el-select
        :style="{ width: item.options.width ? item.options.width : '' }"
        filterable
        @change="
          (value) => {
            item.options.onChange && item.options.onChange(value);
            $emit('change');
          }
        "
        v-bind="item.options"
        v-model="item.options.defaultValue"
      >
        <el-option
          v-for="items in item.options.options"
          :key="items[item.options.props.value]"
          :label="items[item.options.props.label]"
          :value="items[item.options.props.value]"
        >
        </el-option>
      </el-select>
    </template>
    <!-- cascader 树选择器 -->

    <template v-if="item.type === 'cascader'">
      <el-cascader
        :style="{ width: item.options.width ? item.options.width : '' }"
        filterable
        v-model="item.options.defaultValue"
        :options="item.options.options"
        v-bind="item.options"
        :class="item.options.class"
        @change="
          (value) => {
            item.options.onChange && item.options.onChange(value);
            $emit('change');
          }
        "
      ></el-cascader>
    </template>
    <!-- Switch 开关 -->

    <template v-if="item.type === 'switch'">
      <el-switch
        v-model="item.options.defaultValue"
        v-bind="item.options"
        @change="
          (value) => {
            item.options.onChange && item.options.onChange(value);
            $emit('change');
          }
        "
      >
      </el-switch>
    </template>
    <!-- TimePicker 时间选择器  -->

    <template v-if="item.type === 'TimePicker'">
      <el-time-select
        v-model="item.options.defaultValue"
        v-bind="item.options"
        @change="
          (value) => {
            item.options.onChange && item.options.onChange(value);
            $emit('change');
          }
        "
      >
      </el-time-select>
    </template>
    <!-- DatePicker 日期选择器 -->

    <template v-if="item.type === 'DatePicker'">
      <el-date-picker
        :default-value="
          item.options.AdvanceTime ? item.options.AdvanceTime : ''
        "
        :style="{ width: item.options.width ? item.options.width : '' }"
        align="right"
        v-model="item.options.defaultValue"
        v-bind="item.options"
        :picker-options="conditionalPickerOptions"
        @change="
          (value) => {
            item.options.onChange && item.options.onChange(value);
            $emit('change');
          }
        "
      >
      </el-date-picker>
    </template>
    <!-- 文件上传 -->

    <template v-if="item.type === 'upload'">
      <wang-upload
        v-bind="item.options"
        v-model="item.options.defaultValue"
        @change="
          (value) => {
            item.options.onChange && item.options.onChange(value);
            $emit('change');
          }
        "
        @input="
          (value) => {
            item.options.defaultValue = value;
          }
        "
      ></wang-upload>
    </template>

    <!-- 图片文件上传 -->

    <template v-if="item.type === 'uploadImg'">
      <wang-upload-img
        v-bind="item.options"
        v-model="item.options.defaultValue"
        @change="
          (value) => {
            item.options.onChange && item.options.onChange(value);
            $emit('change');
          }
        "
        @input="
          (value) => {
            item.options.defaultValue = value;
          }
        "
      ></wang-upload-img>
    </template>
    <!-- 自定义组件 -->

    <template v-if="item.type === 'Slots'">
      <slot :name="item.slotName" />
    </template>

    <!-- 富文本 -->

    <template v-if="item.type === 'Editor'">
      <wang-editor
        v-bind="item.options"
        v-model="item.options.defaultValue"
        @change="
          (value) => {
            item.options.onChange && item.options.onChange(value);
            $emit('change');
          }
        "
        @input="
          (value) => {
            item.options.defaultValue = value;
          }
        "
      >
      </wang-editor>
    </template>
  </el-form-item>
</template>

<script>
import WangUpload from "./FormItem/upload.vue";
import WangUploadImg from "./FormItem/uploadImg.vue";
import WangEditor from "./FormItem/wangeditor.vue";
import minx from "./minx.js";
import cdPopup from "./cd-popup.vue";
export default {
  mixins: [minx],
  name: "FormItem",
  components: { WangUpload, WangUploadImg, WangEditor, cdPopup },
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    model: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      pickerOptionsDaterange: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pickerOptionsMonthrange: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {},
  computed: {
    conditionalPickerOptions() {
      const { type, pickerOptionsShow } = this.item.options;
      if (pickerOptionsShow) {
        const picker =
          type === "daterange"
            ? this.pickerOptionsStart
            : type === "date"
            ? this.pickerOptions
            : type === "monthrange"
            ? this.pickerOptionsMonthrange
            : null;

        return picker;
      } else {
        return null;
      }
    },
  },
  watch: {
    model: {
      handler(val) {
        this.form = val;
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-input__suffix-inner {
  i {
    line-height: 38px !important;
  }
}

::v-deep .el-checkbox {
  width: 180px !important;
}



// 把禁用颜色去除 

::v-deep .el-input.is-disabled .el-input__inner {
  background-color: rgb(255, 255, 255) !important;
  border-color: #dfe4ed !important;
  color: #848484 !important;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff !important;
  border-color: #dfe4ed !important;
  color: #848484 !important;
}
::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #848484 !important;
  cursor: not-allowed;
}
::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
  background-color: #fff !important;
  border-color: #dcdfe6;
  cursor: not-allowed;
}
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #848484 !important;
}
</style>
